<template>
  <div :class="item.config.class">
    <template v-if="item.config['model'] == 'appModel3'">
      <div class="model-3-content" :style="{
        'background-color': item.configH5['backgroundColor']
        }" @click.stop.prevent="editModel(item)">        
        <div class="package-btn-content flex-normal">
          <div class="left-btn flex-center" :prop-data="getModelItemConfig('listDesc_btnPrice')"
            :style="{
              'font-family': setAttr(item['listDesc_btnPrice'], 'fontFamily'),
              'font-size': item['listDesc_btnPrice'] ? $px2rem(`${item['listDesc_btnPrice'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['listDesc_btnPrice'], 'color'),
            }">
            <!-- }" @click.stop.prevent="editModel(item['listDesc_btnPrice'])"> -->
            <span :style="{'font-size': $px2rem('14px')}">特惠价</span>
						<span :style="{'font-size': $px2rem('30px')}">{{totalWFPrice}}</span>
						<span :style="{'font-size': $px2rem('14px')}">元</span>
          </div>
          <div class="right-btn flex-center" :prop-data="getModelItemConfig('listDesc_btnPackage')"
            :style="{
              'font-family': setAttr(item['listDesc_btnPackage'], 'fontFamily'),
              'font-size': item['listDesc_btnPackage'] ? $px2rem(`${item['listDesc_btnPackage'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['listDesc_btnPackage'], 'color'),
            }">
            <!-- }" @click.stop.prevent="editModel(item['listDesc_btnPackage'])"> -->
            享原价{{ totalPrice }}元服务
          </div>
        </div>
        <div class="package-main-content">
          <div class="col-item flex-column" v-for="(pack) in setList(list, 3)" :key="pack.id">
            <span class="col-label" :prop-data="getModelItemConfig('listTitle_normal')"
            :style="{
              'font-family': setAttr(item['listTitle_normal'], 'fontFamily'),
              'font-size': item['listTitle_normal'] ? $px2rem(`${item['listTitle_normal'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['listTitle_normal'], 'color'),
            }" @click.stop.prevent="editModel(item['listTitle_normal'])">{{pack.serveName}}</span>
            <div class="col-money flex-center">
              <span class="money-icon"  :prop-data="getModelItemConfig('listIcon_normal')"
                :style="{
                'font-family': setAttr(item['listIcon_normal'], 'fontFamily'),
                'font-size': item['listIcon_normal'] ? $px2rem(`${item['listIcon_normal'].configH5['fontSize']}px`) : '',
                'color': setAttr(item['listIcon_normal'], 'color'),
              }" @click.stop.prevent="editModel(item['listIcon_normal'])">￥</span>
              <span class="money-num"  :prop-data="getModelItemConfig('listNum_normal')"
                :style="{
                'font-family': setAttr(item['listNum_normal'], 'fontFamily'),
                'font-size': item['listNum_normal'] ? $px2rem(`${item['listNum_normal'].configH5['fontSize']}px`) : '',
                'color': setAttr(item['listNum_normal'], 'color'),
              }" @click.stop.prevent="editModel(item['listNum_normal'])">{{pack.price}}</span>
              <span class="money-desc"  :prop-data="getModelItemConfig('listDesc_normal')"
                :style="{
                'font-family': setAttr(item['listDesc_normal'], 'fontFamily'),
                'font-size': item['listDesc_normal'] ? $px2rem(`${item['listDesc_normal'].configH5['fontSize']}px`) : '',
                'color': setAttr(item['listDesc_normal'], 'color'),
              }" @click.stop.prevent="editModel(item['listDesc_normal'])">价值</span>
            </div>
          </div>
        </div>
        <div v-if="completeIncome" class="package-desc" :prop-data="getModelItemConfig('desc_normal')"
          :style="{
            'font-family': setAttr(item['desc_normal'], 'fontFamily'),
            'font-size': item['desc_normal'] ? $px2rem(`${item['desc_normal'].configH5['fontSize']}px`) : '',
            'color': setAttr(item['desc_normal'], 'color'),
          }" @click.stop.prevent="editModel(item['desc_normal'])">分享得现金：分享活动，并被购买，将获得{{completeIncome}}元现金奖励</div>
      </div>
    </template>
    <template v-if="item.config['model'] == 'appModel5'">
      <div class="model-5-content">
        <div class="title-content flex-center">
          <span :prop-data="getModelItemConfig('listTitle_normal')" 
            class="title-txt" @click.stop="editModel(item['listTitle_normal'])"
            :style="{
              'font-family': setAttr(item['listTitle_normal'], 'fontFamily'),
              'font-size': item['listTitle_normal'] ? $px2rem(`${item['listTitle_normal'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['listTitle_normal'], 'color'),
            }">{{ setAttr(item['listTitle_normal'], 'text')}}</span>
        </div>
        <div :class="['package-main-content', list.length <= 2 && 'center']" :prop-data="getModelItemConfig('list_normal')"
          :style="{
            'font-family': setAttr(item['list_normal'], 'fontFamily'),
            'font-size': item['list_normal'] ? $px2rem(`${item['list_normal'].configH5['fontSize']}px`) : '',
            'color': setAttr(item['list_normal'], 'color'),
          }" @click.stop.prevent="editModel(item['list_normal'])">
          <div class="col-item flex-column" v-for="(pack) in setList(list, 3)" :key="pack.id">
            <span class="col-label">{{pack.serveName}} * {{ pack.itemNum }}</span>
            <span class="moeny-line"></span>
            <div class="col-money flex-center">
              <span class="money-num">价值{{pack.price}}</span>
            </div>
          </div>
        </div>
        <div class="package-total-content">
          <span class="total-txt" :prop-data="getModelItemConfig('listTotal_normal')"
          @click.stop="editModel(item['listTotal_normal'])"
          :style="{
            'font-family': setAttr(item['listTotal_normal'], 'fontFamily'),
            'font-size': item['listTotal_normal'] ? $px2rem(`${item['listTotal_normal'].configH5['fontSize']}px`) : '',
            'color': setAttr(item['listTotal_normal'], 'color'),
          }"> 现在下单即享以下项目，总价值{{totalPrice}}元 </span>
          <div class="total-image-content flex-column">
            <span class="image-label">特惠价</span>
            <div class="image-val">
              <span class="val-unit">￥</span>
              <span class="val-num">{{totalWFPrice}}</span>
            </div>
          </div>
        </div>
        <div v-if="completeIncome" class="package-desc" :prop-data="getModelItemConfig('desc_normal')"
          :style="{
            'font-family': setAttr(item['desc_normal'], 'fontFamily'),
            'font-size': item['desc_normal'] ? $px2rem(`${item['desc_normal'].configH5['fontSize']}px`) : '',
            'color': setAttr(item['desc_normal'], 'color'),
          }" @click.stop.prevent="editModel(item['desc_normal'])">分享得现金：分享活动，并被购买，将获得{{completeIncome}}元现金奖励</div>

      </div>
    </template>
  </div>
</template>

<script>
import mixin from '../mixin'
import { packageModel } from '@/formgen/components/FormConfig/model-config'
import {getTcList} from '@/formgen/api/index'
import { mapGetters } from 'vuex'

export default {
  name: 'DPackage',
  mixins: [mixin],
  computed: {
    ...mapGetters(['vuex_activity']),
    completeIncome(){
      let {completeIncome, whetherToShare} = this.vuex_activity
      if(!whetherToShare) return false
      return completeIncome
    },
  },
  data(){
    return {
      packageModel: JSON.parse(JSON.stringify(packageModel)),
      list: [],
      totalPrice: 0,
      totalWFPrice: 0
    }
  },
  mounted(){
    let _self = this
    _self.getTcList()
  },
  methods: {
    setList(list, num){
      let len = list.length
      // if(len > num){
      //   return list.slice(0, num)
      // }
      return list
    },
    setAttr(config, key){
      if(!config) return null
      return config.configH5[key]
    },
    getModelItemConfig(key){
      let _self = this
      let {model} = _self.item.config
      let config = _self.item[key] || _self.packageModel[model][key]
      _self.$set(_self.item, key, config)
    },
    editModel(item){
      this.$emit('edit-model', item)
    },
    getTcList(){
      let _self = this
      let {id = ''} = _self.$route.params
      getTcList(id || _self.activeId).then(res => {
        let {serveList, writeOffPrice = '0.00'} = res.data || {}
        _self.list = serveList || []
        _self.totalWFPrice = parseFloat(writeOffPrice)
        _self.list.forEach(i => {
          _self.totalPrice += parseFloat(i.price)
        })
      })
    },
  },
}
</script>

<style scoped lang="scss">
  .app-model-3.package-model{
    position: relative;
    padding: rem(20) 0;
    .package-btn-content{
      .left-btn{
        width: rem(310);
        height: rem(98);
        background: url('/static/image/app-model-3/btn-1.png') no-repeat center;
        background-size: contain;
        border-radius: 0 0 rem(49) rem(49);
      }
      .right-btn{
        width: rem(310);
        height: rem(98);
        background: url('/static/image/app-model-3/btn-2.png') no-repeat center;
        background-size: contain;
        flex: 1;
      }
    }
    .package-main-content{
      padding: rem(44) 0 rem(30);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: rem(20);
      .col-item{
        position: relative;
        height: rem(208);
        background: url('/static/image/app-model-3/package-normal-bg.png') no-repeat center;
        background-size: contain;
        .col-label{
          position: absolute;
          left: rem(20);
          right: rem(20);
          top: rem(25);
          text-align: center;
        }
        .col-money{
          position: absolute;
          left: rem(20);
          right: rem(20);
          top: rem(120);
          .money-icon{
            font-weight: 500;
          }
          .money-num{
            font-weight: 500;
          }
          .money-desc{
            font-weight: 500;
            writing-mode: tb-rl;
          }
        }
      }
    }
    .package-desc{
      font-size: rem(24);
      color: #FECD8B;
    }
  }
  .app-model-5.package-model{
    .model-5-content{
      border-radius: rem(10);
      box-shadow: rem(3) 0 rem(7) 0 #1863B2;
      .title-content{
        height: rem(137);
        background: url('/static/image/app-model-5/title-bg.png') no-repeat center;
        background-size: contain;
        font-weight: bold;
      }
    }
    .package-main-content{
      background: linear-gradient(to top, #D1EEFE, #FFFFFF);
      margin: rem(30);
      border-radius: rem(12);
      border: rem(1) solid #3288CE;
      font-weight: bold;      
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: rem(20);
      padding: rem(15) 0;
      align-items: center;
      justify-items: center;
      &.center{
        grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
        .col-item:nth-child(n)::after{
          display: none;
        }
      }
      .col-item{
        text-align: center;
        padding: rem(20) rem(20);
        position: relative;
        .moeny-line{
          border-bottom: 1px dotted #3288CE;
          width: 100%;
          margin: rem(20) 0 rem(30) 0;
        }
        &:nth-child(3n)::after{
          display: none;
        }
        &::after{
          content: '';
          position: absolute;
          height: rem(160);
          border-right: 1px dotted #3288CE;
          top: 50%;
          transform: translateY(-50%);
          right: rem(-10.5);
        }
      }
    }
    .package-total-content{
      margin: rem(30) 0;
      padding: 0 rem(30);
      position: relative;
      .total-image-content{
        position: absolute;
        background: url('/static/image/app-model-5/th-bg.png') no-repeat center;
        background-size: contain;
        width: rem(160);
        height: rem(130);
        right: 0;
        top: rem(-80);
        text-align: center;
        color: #97651B;
        align-items: center;
        justify-content: center;
        .image-label{
          font-size: rem(24);
        }
        .val-unit{
          font-size: rem(24);
        }
        .val-num{
          font-size: rem(40);
          font-weight: bolder;
        }
      }
    }
    .package-desc{
      line-height: 2.4;
      padding: 0 rem(30);
    }
  }
</style>
